<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
* {margin:0; padding:0; list-style:none;}

#div1 {width:600px; height:400px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul {position:absolute;left: 0;top: 0;}
#div1 ul li{height:400px;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{border-radius:10px;width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;left: 50%;margin-bottom:-5px;margin-top: -5px;height: 40px;line-height: 32px;text-align: center;width: 30px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goP{bottom: 0;transform:rotate(270deg);}
#goN{top: 0;transform:rotate(270deg);}
img{width:600px; height:400px;}
</style>
<script type="text/javascript">
	window.onload=function(){
		var div=document.querySelector('#div1')
		var ul=div.querySelector('ul')
		var pp=ul.querySelectorAll('li')
		var ol=div.querySelector('ol')
		var goP=document.querySelector('#goP')
		var goN=document.querySelector('#goN')
		var btn=[]
		var isMove=false
		var timer=null
		var index=0
		var last=0
		var len=pp.length
		var height=pp[0].offsetHeight
		ul.appendChild(pp[0].cloneNode(true))
		ul.style.height=(len+1)*height+'px'
		for(let i=0;i<len;i++){
			var li=document.createElement('li')
			li.innerHTML=i+1
			if(i===0) li.className='ac'
			ol.appendChild(li)
			btn.push(li)
			li.onclick=function () {
				if(!isMove){
					isMove=true
					last=index
					index=i
					btn[last].classList.remove('ac')
					btn[index].classList.add('ac')
					move(index)
				}
			}
		}
		goN.onclick=function(){
			if(!isMove){
				isMove=true
				last=index
				index++
				if(index===len){
					index=0
					move(len,function(){
						ul.style.top='0px'
					})
				}else {
					move(index)
				}
				btn[last].classList.remove('ac')
				btn[index].classList.add('ac')
				
			}
		}
		goP.onclick=function(){
			if(!isMove){
				isMove=true
				last=index
				index--
				if(index<0){
					index=len-1
					ul.style.top=-len*height+'px'
				}
				btn[last].classList.remove('ac')
				btn[index].classList.add('ac')
				move(index)
			}
		}
		function auto(){
			timer=setInterval(()=>{
				goN.onclick()
			},2000)
		}
		auto()
		div.onmouseenter=function(){
			clearInterval(timer)
		}
		div.onmouseleave=auto()
		function move(num,fn){
			clearInterval(ul.timer)
			var start=ul.offsetTop
			var end=-num*height
			ul.timer=setInterval(()=>{
				var distance=end-start
				var speed=distance>0 ? Math.ceil(distance/10) : Math.floor(distance/10)
				start=start+speed
				ul.style.top=start+'px'
				if(start===end){
					clearInterval(ul.timer)
					isMove=false
					fn&&fn()
				}
			},30)
			}
	}
</script>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li><img src="img/28.jpg"/></li>
				<li><img src="img/29.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/30.jpg"/></li>
				<li><img src="img/35.jpg"/></li>
			</ul>
			<ol></ol>
			<a href="javascript:;" id="goP">&laquo;</a>
             <a href="javascript:;" id="goN">&raquo;</a>
		</div>
	</body>
</html>
